﻿@{
    ViewBag.Title = "Home Page";
}
<div style="background: url(/content/images/b1.jpg) top left no-repeat; background-size: cover; height: 300px;">
    <div class="container" style="padding: 50px 20px">
        <div class="countdown" data-role="countdown" data-stoptimer="2015-05-01" data-style-background="bg-cyan" data-style-divider="fg-white"></div>
        <h1 class="fg-white">AUTHENTICATION MODULES</h1>
        <h2 class="fg-white">Simple styles of site<br />
            with an interface similar to Windows 8.
        </h2>
        <!--<a href="https://github.com/olton/Metro-UI-CSS/archive/master.zip"
            class="place-left button bg-darkRed bg-hover-red fg-white fg-hover-white bd-orange" style="margin-top: 10px">
            <h3 style="margin: 10px 40px">Download <span class="icon-download-2 on-right"></span></h3>
        </a>-->
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" class="place-left" style="margin-left: 20px; margin-top: 10px;">
            <input type="hidden" name="cmd" value="_s-xclick" />
            <input type="hidden" name="hosted_button_id" value="8JQAAX78EMT4E">
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
        </form>
    </div>
</div>
<div class="container">
    <div>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Metro UI - Responsive 1 -->
        <ins class="adsbygoogle"
            style="display: block"
            data-ad-client="ca-pub-1632668592742327"
            data-ad-slot="8347181909"
            data-ad-format="auto"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
    <div class="grid fluid">
        <div class="row">
            <div class="span4 bg-amber padding20 text-center">
                <h2 class="fg-white">easy to use</h2>
            </div>
            <div class="span4 bg-green padding20 text-center">
                <h2 class="fg-white">fast & fast</h2>
            </div>
            <div class="span4 bg-red padding20 text-center">
                <h2 class="fg-white">200 Free licenses</h2>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="grid no-margin">
        <div class="row">
            <div class="span4 no-tablet-portrait no-phone">
                <div class="notice marker-on-right bg-lighterBlue padding20 text-center" style="height: 200px">
                    <h1 class="fg-white" style="font-size: 120px; line-height: 80px; margin-bottom: 30px">5</h1>
                    <p class="subheader-secondary fg-white">newest applications</p>
                </div>
            </div>
            <div class="span8">
                <div class="notice marker-on-bottom no-desktop padding10 bg-lighterBlue text-center ">
                    <p class="subheader-secondary fg-white no-margin">5 newest applications</p>
                </div>
                <ol class="styled">
                    <li style="width: 90%">Local Payroll system management of <strong>LG Elictronic</strong></li>
                    <li style="width: 90%">Points of sale management <a href=""><strong>iPOS</strong>.net.vn</a></li>
                    <li style="width: 90%">Customer relation management <a href=""><strong>iCRM</strong>.net.vn</a></li>
                    <li style="width: 90%">Hospitals management system <a href=""><strong>iHOS</strong>.vn</a></li>
                    <li style="width: 90%">System logs application <a href=""><strong>iLOGS</strong>.vn</a></li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- Data Table list -->
<div class="container">
    <div class="example">
        <table class="table striped hovered dataTable" id="dataTables-1">
            <thead>
                <tr>
                    <th class="text-left">Engine</th>
                    <th class="text-left">Browser</th>
                    <th class="text-left">Platform</th>
                    <th class="text-left">Version</th>
                    <th class="text-left">CSS grade</th>
                    <th class="text-left"></th>
                </tr>
            </thead>

            <tbody>
            </tbody>

            <tfoot>
                <tr>
                    <th class="text-left">Engine</th>
                    <th class="text-left">Browser</th>
                    <th class="text-left">Platform</th>
                    <th class="text-left">Version</th>
                    <th class="text-left">CSS grade</th>
                    <th class="text-left"></th>
                </tr>
            </tfoot>
        </table>
        <script>
            $(function () {

                var table = $('#dataTables-1').dataTable({
                    "bProcessing": true,
                    "sAjaxSource": "/template/data/dataTables-objects.txt",
                    "aoColumns": [
                        { data: "engine" },
                        { data: "browser" },
                        { data: "platform" },
                        { data: "version" },
                        { data: "grade" },
                        {
                            data: null,
                            className: "text-center",
                            defaultContent: '<a href="" class="editor_edit  icon-wrench fg-orange">&nbsp;</a> <a href="" class="editor_remove icon-cancel-2 fg-red">&nbsp;</a>'
                        }
                    ]
                });

                // Edit record
                $('#dataTables-1 tbody').on('click', 'tr a.editor_edit', function (e) {
                    e.preventDefault();
                    var rowData = table.fnGetData(this.closest('tr'));
                    $.Dialog({
                        shadow: true,
                        overlay: true,
                        //draggable: true,
                        icon: '<span class="icon-bus"></span>',
                        title: 'Draggable window',
                        width: 500,
                        padding: 10,
                        content: '',
                        onShow: function () {
                            var content = '<form id="login-form-1">' +
                                    '<label>Engine</label>' +
                                    '<div class="input-control text"><input type="text" name="Engine" id="Engine"><button class="btn-clear"></button></div>' +
                                    '<label>Browser</label>' +
                                    '<div class="input-control password"><input type="text" name="Browser" id="Browser"><button class="btn-reveal"></button></div>' +
                                    //'<div class="input-control checkbox"><label><input type="checkbox" name="c1" checked/><span class="check"></span>Check me out</label></div>' +
                                    '<div class="form-actions">' +
                                    '<button class="button primary icon-floppy" type="button" onclick="this.engine=$(\'#Engine\').val();$.Dialog.close();">Save This Application</button>&nbsp;' +
                                    '<button class="button" type="button" onclick="$.Dialog.close()">Cancel</button> ' +
                                    '</div>' +
                                    '</form>';
                            $.Dialog.content(content);
                            $('#Engine').val(rowData.engine);
                            $('#Browser').val(rowData.browser);
                        }
                    });
                }); 
            });
        </script>
    </div>

    <pre class="prettyprint linenums no-phone" style="margin-top: 10px;">
            &lt;!DOCTYPE html&gt;
            &lt;html&gt;
            &lt;head&gt;
            &lt;link rel="stylesheet" href="css/metro-bootstrap.css"&gt;
            &lt;script src="js/jquery/jquery.min.js"&gt;&lt;/script&gt;
            &lt;script src="js/jquery/jquery.widget.min.js"&gt;&lt;/script&gt;
            &lt;script src="js/metro/metro.min.js"&gt;&lt;/script&gt;
            &lt;/head&gt;
            &lt;body class="metro"&gt;
            ... markup page ...
            &lt;/body&gt;
            &lt;/html&gt;
            </pre>
</div>
<!--/Data Table -->

<div class="bg-steel no-tablet-portrait no-phone">
    <div class="container padding20 fg-white">
        <div class="carousel bg-transparent no-overflow" id="carousel2">
            <div class="slide">
                <div class="place-right">
                    <img src="/content/images/css-logo.png"
                        alt="" class="span3" />
                </div>
                <h2 class="fg-white ntm">Developed with advice</h2>
                <p class="fg-white">Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons.</p>
                <p class="fg-white">Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.</p>
            </div>
            <div class="slide">
                <div class="place-right padding20 ntp nrp nbp">
                    <img src="/content/images/bizspark_b_2.png"
                        alt="" class="span3" />
                </div>
                <h2 class="fg-white ntm">BizSpark Startup</h2>
                <p class="fg-white">Metro UI CSS is a BizSpark Startup. Microsoft BizSpark is a global program that helps software startups succeed by giving them access to software development tools, connecting them with key industry players, and providing marketing visibility.</p>
                <p class="fg-white">BizSpark provides free software, support, and visibility to help startups succeed. Join BizSpark and become part of a global community that has over 50,000 members in 100+ countries.</p>
                <a class="button small1 inverse" href="http://bizspark.com">Join the BizSpark Program now</a>
            </div>
        </div>
        <script>
            $(function () { $("#carousel2").carousel({ height: 210, period: 5000, duration: 1000, effect: 'fade', markers: { show: false } }); })
        </script>
    </div>
</div>
<div class="bg-dark">
    <div class="container" style="padding: 10px 0;">
        <div class="grid no-margin">
            <div class="row no-margin">
                <div class="span3 padding10">
                    <img src="/content/images/spface.jpg" alt="" class="polaroid" />
                </div>
                <div class="span6 padding10">
                    <h3 class="fg-white">About author</h3>
                    <p class="fg-white">Hi! My name Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.</p>
                </div>
                <div class="span3 padding10">
                    <a class="button danger " style="width: 100%; margin-bottom: 5px" href="http://bizspark.com">Microsoft BizSpark</a>
                    <a class="button success " style="width: 100%; margin-bottom: 5px" href="http://jetbrains.com">JetBrains</a>
                    <a class="button info " style="width: 100%; margin-bottom: 5px" href="https://github.com/olton/Metro-UI-CSS">Github</a>
                    <a class="button warning " style="width: 100%; margin-bottom: 5px;" href="http://lesscss.org">{ Less }</a>
                </div>
            </div>
        </div>
    </div>
    <div class="container tertiary-text bg-dark fg-white" style="padding: 10px">
        2012-2013, Metro UI CSS &copy; by  <a href="mailto:sergey@pimenov.com.ua" class="fg-yellow">Sergey Pimenov</a>
    </div>
</div>
